<include file="Public/head"/>
<style type="text/css">
    .focus-btn {
        width: 80px;
        border-radius: 3px;
        color: #fff;
        margin-left: 7px;
        padding: 0;
        background-color: #20ab4f;
        border: medium none;
    }

    .carousel table tr td {
        height: 40px;
        line-height: 40px;
        text-align: left;
    }

    .carousel_sub {
    }

    .carousel_sub input {
        background: #20ab4f;
        border: 1px solid #20ab4f;
        border-radius: 3px;
        color: #fff;
        cursor: pointer;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        margin: 30px 10px;
        text-align: center;
        width: 170px;
    }

    .genghua {
        background: #20ab4f;
        border: medium none;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        width: 100px;
        margin-left: -105px;
    }

    .shangChuan {
        cursor: pointer;
        height: 30px;
        opacity: 0;
        width: 100px;
    }

    .shangChuan1 {
        cursor: pointer;
        height: 30px;
        opacity: 0;
        width: 100px;
    }

    .edit_page, .confirm_page {
        border: 1px solid #ececec;
    }

    #sort-list ul li {
        float: left;
        margin-left: 10px;
    }

    #sort-list ul li span {
        display: block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #ececec;
        text-align: center;
        cursor: pointer;
    }

    .sortCuur {
        background-color: #20ab4f;
        color: #fff;
        border: 1px solid #20ab4f;
    }

    .isHave {
        background-color: #ececec;
    }
</style>
</head>
<include file="Public/common_header"/>
<div class="mian">
    <include file="Public/sidebar" menu="clcwht.clcwjdt"/>

    <div class="mianR">
        <div class="edit_page">
            <h3 class="cha">编辑焦点图</h3>
            <div class='carousel'>
                <table width="100%">
                    <tr>
                        <td style="text-align:center">标题</td>
                        <td style="padding:5px 10px;">
                            <input type="text" name="title" value="{$carousel.title}" placeholder="请输入标题"
                                   style="width:300px;height:30px;line-height:30px;border:1px solid #ededee;padding-left:5px;">
                        </td>
                    </tr>
                    <tr>
                        <td width="10%" style="text-align:center">图片</td>
                        <td width="80%" style="padding:5px 10px;">
                            <if condition="$carousel.focus_picture eq ''">
                                <img id="carousel_pic" src="">
                                <else/>
                                <img id="carousel_pic" src="{$carousel.focus_picture}@182w_82h">
                            </if>
                            <script type='text/javascript'>
                                new IFrameUploadImg(
                                    '浏览'
                                    , 'http://' + window.location.host + '/ClcwCarousel/uploadPic'
                                    , function (res) {
                                        var cdn_url = 'http:{$t|get_content_cdnurl}';
                                        if (res.code == 200) {
                                            var head_url = res.data[0];
                                            $('#carousel_pic').attr('src', cdn_url + head_url + '@182w_82h_90Q');
                                            $('#confirm_carousel_pic').attr('src', cdn_url + head_url + '@182w_82h_90Q');
                                            $('#true_carousel_pic').attr('src', cdn_url + head_url);
                                        }
                                    });
                            </script>
                            <!--<input type="file" name="focus_picture">-->
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:center">类型</td>
                        <td style="padding:5px 10px;">
                            <input type="radio" name="type" value="2"
                                   class="type_item" <?php echo $carousel['type']==2?'checked':'';?>/>活动
                            <input type="radio" name="type" value="3"
                                   class="type_item" <?php echo $carousel['type']==3?'checked':'';?>/>图片
                            <input type="radio" name="type" value="4"
                                   class="type_item" <?php echo $carousel['type']==4?'checked':'';?>/>问答活动
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:center">参数</td>
                        <td style="padding:5px 10px;">
                            <div id="param_url">
                                <input type="text" name="param_url" placeholder="请输入以“http://”开头的活动URL"
                                       style="width:300px;height:30px;line-height:30px;border:1px solid #ededee;padding-left:5px;"
                                       value="{$carousel.param_url}">
                            </div>
                            <div id="activity_id" style="display: none;">
                                <input type="text" name="activity_id" placeholder="请输入活动ID"
                                       style="width:300px;height:30px;line-height:30px;border:1px solid #ededee;padding-left:5px;"
                                       value="<?php echo $carousel['activity_id']?$carousel['activity_id']:''?>"/>
                                <span class="check" style="color:#20ab4f;cursor: pointer;" onclick="check()">查询</span>
                                <span class="check_result"></span>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:center">是否登录</td>
                        <td id="param_auth" style="padding:5px 10px;">
                            <input type="radio" name="auth"
                                   value="1" <?php echo $carousel['auth'] == 1 ? 'checked' : '';?>>是
                            <input type="radio" name="auth"
                                   value="2" <?php echo $carousel['auth'] == 2 ? 'checked' : '';?>>否
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:center">排序</td>
                        <td style="padding:5px 10px;" id="sort-list">
                            <ul>
                                <volist name="sort_position" id="sp">
                                    <if condition="$sp.is_have eq 1">
                                        <li><span sort-value="{$sp.position}" class="isHave">{$sp.position}</span></li>
                                        <else/>
                                        <li><span sort-value="{$sp.position}">{$sp.position}</span></li>
                                    </if>
                                </volist>
                            </ul>
                            <em style="padding-left:20px;">灰色为已占用</em>
                        </td>
                    </tr>
                    <tr>
                        <td width="10%" style="text-align:center">图片</td>
                        <td width="80%" style="padding:5px 10px;">
                            <if condition="$carousel.share_picture eq ''">
                                <img id="share_pic" src="">
                                <else/>
                                <img id="share_pic" src="{$carousel.share_picture}@182w_82h">
                            </if>
                            <script type='text/javascript'>
                                var FrameUploadThumbImgComplete = null;

                                function IFrameUploadThumbImg(txt, upload_url, cb) {
                                    var r = Math.random().toString().split('.')[1];
                                    var id = 'upfrom' + r, input_id = 'file' + r, frm = 'frm' + r;

                                    var html = '<iframe src="" id="' + frm + '" name="' + frm + '" style="display:none;"></iframe><form id="' + id + '" action="' + upload_url + '?script_callback=parent.IFrameUploadThumbImgComplete"  method="POST" enctype="multipart/form-data" target="' + frm + '">\
                <input type="file" id="' + input_id + '" name="pic" class="shangChuan1" />\
                <input type="button" class="genghua" value="' + txt + '" />\
            </form>';
                                    document.write(html);
                                    this.input = $('#' + input_id);
                                    this.input.change(function (e) {
                                        IFrameUploadThumbImgComplete = function (data) {
                                            if (typeof(cb) != 'undefined')
                                                cb(data);
                                        };
                                        var fm = $('#' + id);
                                        fm.action += '&t' + Math.random();
                                        fm.submit();
                                    });
                                };

                                new IFrameUploadThumbImg(
                                    '浏览'
                                    , 'http://' + window.location.host + '/ClcwCarousel/uploadPic'
                                    , function (res) {
                                        var cdn_url = 'http:{$t|get_content_cdnurl}';
                                        if (res.code == 200) {
                                            var head_url = res.data[0];
                                            $('#share_pic').attr('src', cdn_url + head_url + '@182w_82h_90Q');
                                            $('#confirm_share_pic').attr('src', cdn_url + head_url + '@182w_82h_90Q');
                                            $('#true_share_pic').attr('src', cdn_url + head_url);
                                        }
                                    });
                            </script>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:center">分享内容</td>
                        <td style="padding:5px 10px;">
                            <input type="text" name="share_content" value="{$carousel.share_content}"
                                   placeholder="请输入分享内容"
                                   style="width:300px;height:30px;line-height:30px;border:1px solid #ededee;padding-left:5px;">
                        </td>
                    </tr>
                </table>
                <div class='carousel_sub'>
                    <input type='hidden' name='c_id' value='{$carousel.id}'>
                    <input type="hidden" value="{$platform}" name="platform">
                    <input type="button" value="确定" name="submit_carousel">
                    <input type="button" value="取消" name="cancel_carousel">
                </div>
            </div>
            <div class="yunBei" style="z-index:999998"></div>
        </div>

        <div class="confirm_page" style="display:none;">
            <h3 class="cha">确认焦点图</h3>
            <div class='carousel'>
                <table width="100%">
                    <tr>
                        <td style="text-align:center">标题</td>
                        <td style="padding:5px 10px;">
                            <div id="title"></div>
                        </td>
                    </tr>
                    <tr style="height:82px;">
                        <td width="10%" style="text-align:center">图片</td>
                        <td width="80%" style="padding:5px 10px;">
                            <img id="confirm_carousel_pic" src="">
                            <img id="true_carousel_pic" src="{$carousel.focus_picture}" style="display: none;">
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:center">类型</td>
                        <td style="padding:5px 10px;">
                            <div id="type"></div>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:center">参数</td>
                        <td id="param" style="padding:5px 10px;"></td>
                    </tr>
                    <tr>
                        <td style="text-align:center">是否登录</td>
                        <td style="padding:5px 10px;">
                            <div id="auth"></div>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:center">排序</td>
                        <td style="padding:5px 10px;">
                            <div id="sort"></div>
                        </td>
                    </tr>
                    <tr style="height:82px;">
                        <td width="10%" style="text-align:center">图片</td>
                        <td width="80%" style="padding:5px 10px;">
                            <img id="confirm_share_pic" src="">
                            <img id="true_share_pic" src="{$carousel.share_picture}" style="display: none;">
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:center">分享内容</td>
                        <td style="padding:5px 10px;">
                            <div id="share_content"></div>
                        </td>
                    </tr>
                </table>
                <div class='carousel_sub'>
                    <input type='hidden' name='confirm_c_id' value='{$carousel.id}'>
                    <input type="button" value="确定" name="confirm_carousel">
                    <input type="button" value="取消" name="cancel_confirm_carousel">
                </div>
            </div>
            <div class="yunBei" style="z-index:999998"></div>
        </div>
    </div>
    <div class="clear"></div>
    <script type="text/javascript">
        $("#sort-list li span").not('.isHave').eq(0).addClass('sortCuur');
        $("#sort-list li span").click(function () {
            if (!$(this).hasClass('isHave')) {
                $("#sort-list li span").removeClass("sortCuur");
                $(this).addClass("sortCuur");
            }
        });
        selectParamsType("{$carousel.type}");
        $('.type_item').change(function () {
            var selValue = $("input[name='type']:checked").val();
            selectParamsType(selValue);
        });

        function selectParamsType(selValue) {
            if (selValue == 2) {
                $('#param_url').css({display: 'block'});
                $('#activity_id').css({display: 'none'});
            } else if (selValue == 3) {
                $('#param_url').css({display: 'none'});
                $('#activity_id').css({display: 'none'});
            } else if (selValue == 4) {
                $('#param_url').css({display: 'block'});
                $('#activity_id').css({display: 'block'});
            }
        }

        function check() {
            var aid = $("input[name='activity_id']").val();
            $.ajax({
                type: 'post',
                url: '/Activity/checkActivity',
                data: 'a_id=' + aid,
                async: false,
                dataType: 'JSON',
                success: function (data) {
                    if (data.code != 200) {
                        $(".check_result").text('');
                        shibai_alert(data.msg);
                        return false;
                    }
                    $(".check_result").text("活动名称：" + data.data.activity_name);
                }
            });
        }

        /**
         * 确定编辑提交
         */
        $("input[name='submit_carousel']").click(function () {
            var c_id = $("input[name='c_id']").val();
            var title = $("input[name='title']").val();
            if (title == '') {
                shibai_alert("抱歉，请输入标题");
                return false;
            }
            $("#title").html(title);
            var focus_pic = $("#carousel_pic").attr("src");
            $("#confirm_carousel_pic").attr("src", focus_pic);
            var type = $("input[name='type']:checked").val();
            if (type == 2 || type == 4) {
                var param_url_reg = /^(\w+:\/\/)?\w+(\.\w+)+.*$/;
                var param_url = $("input[name='param_url']").val();
                if (param_url == '') {
                    shibai_alert("抱歉，未填写参数");
                    return false;
                }
                if (!param_url_reg.test(param_url)) {
                    shibai_alert("抱歉，输入URL参数格式不正确");
                    return false;
                }
            }
            if (type == 4) {
                var activity_id = $("input[name='activity_id']").val();
                if (activity_id == '') {
                    shibai_alert("抱歉，未填写问答ID");
                    return false;
                }
                check(activity_id)
            }
            $("#type").attr("type-id", type);
            if (type == 2) {
                $("#type").html("活动");
                $("#param").html("<div id='param_url_confirm'>" + param_url + "</div>");
            } else if (type == 3) {
                $("#type").html("图片");
                $("#param").html("");
            } else if (type == 4) {
                var activity_name = $(".check_result").text();
                if (activity_name == '') {
                    return false;
                }
                $("#type").html("活动名称");
                $("#param").html("<div id='param_url_confirm'>" + param_url + "</div><span>" + activity_name + "</span><span id='activity_id_confirm' style='display: none;'>" + activity_id + "</span>");
            }

            var auth = $("input[name='auth']:checked").val();
            if (auth == 1) {
                $("#auth").html("是");
            } else {
                $("#auth").html("否");
            }
            var platform = $("input[name='platform']").val();
            if (platform == 1) {
                $("#platform").html("车来车往APP");
            } else if (platform == 2) {
                $("#platform").html("车来车往WEB");
            }
            var sort_reg = /^[0-9]*[1-9][0-9]*$/;
            var sort = $(".sortCuur").attr("sort-value");
            if (sort == '' || sort == undefined) {
                shibai_alert("抱歉，请选择排序");
                return false;
            }
//            if (!sort_reg.test(sort)) {
//                shibai_alert("抱歉，只能输入正整数");
//                return false;
//            }
            $("#sort").html(sort);
            var share_pic = $("#share_pic").attr("src");
            $("#confirm_share_pic").attr("src", share_pic);
            var share_content = $("input[name='share_content']").val();
            $("#share_content").html(share_content);

            $(".edit_page").hide();
            $(".confirm_page").show();
        });
        /**
         * 取消编辑
         */
        $("input[name='cancel_carousel']").click(function () {
            window.history.back();
        });
        /**
         * 确定编辑更新
         */
        $("input[name='confirm_carousel']").click(function () {
            var c_id = $("input[name='confirm_c_id']").val();
            var title = $("#title").html();
            var focus_pic = $("#true_carousel_pic").attr('src');
            var type = $("#type").attr('type-id');
            var auth = $("input[name='auth']:checked").val();
            var param_url = $("#param_url_confirm").text();
            var activity_id = $("#activity_id_confirm").text();
            var sort = $("#sort").html();
            var platform = $("input[name='platform']").val();
            var share_picture = $("#true_share_pic").attr('src');
            var share_content = $("#share_content").html();
            if (type == 2) {
                var params = {
                    "c_id": c_id,
                    "title": title,
                    "focus_picture": focus_pic,
                    "type": type,
                    "param_url": param_url,
                    "auth": auth,
                    "platform": platform,
                    "sort": sort,
                    "share_picture": share_picture,
                    "share_content": share_content
                }
            } else if (type == 3) {
                var params = {
                    "c_id": c_id,
                    "title": title,
                    "focus_picture": focus_pic,
                    "type": type,
                    "param_url": param_url,
                    "auth": auth,
                    "platform": platform,
                    "sort": sort,
                    "share_picture": share_picture,
                    "share_content": share_content
                }
            } else if (type == 4) {
                var params = {
                    "c_id": c_id,
                    "title": title,
                    "focus_picture": focus_pic,
                    "type": type,
                    "auth": auth,
                    "param_url": param_url,
                    "activity_id": activity_id,
                    "platform": platform,
                    "sort": sort,
                    "share_picture": share_picture,
                    "share_content": share_content
                };
            }
            $.post("/ClcwCarousel/editCarouselData", params, function (res) {
                if (res.code == 200) {
                    btn_alert(res.msg);
                    setTimeout(function () {
                        window.location.href = "/ClcwCarousel/index?p=" + {$p};
                    }, 2000);
                } else {
                    shibai_alert(res.msg);
                }
            }, 'json');
        });
        /**
         * 确定界面取消
         */
        $("input[name='cancel_confirm_carousel']").click(function () {
            $(".confirm_page").hide();
            $(".edit_page").show();
        });
    </script>
    <include file="Public/foot"/>
